<script setup>
import {onMounted, ref, watch} from 'vue';
import { useRoute } from 'vue-router';
import { ElInput, ElSelect, ElButton, ElMessage } from 'element-plus';
import axios from "axios";
import {router} from "../router/index.js";
// 定义表单数据对象，根据后端实体类字段对应
const formData = ref({});
// 下拉框
const projectTypes = ref([]);
const getType = () =>{
  axios.get(`/dropdown/getServiceType`).then(res => {
    projectTypes.value = res.data;
  })
}
// 表单验证规则
const formRef = ref(null)
const rules = {
  name:[
    { required: true, message: '请输入名称', trigger: 'blur' },//不能为空
  ],
  times: [
    { required: true, message: '请输入次数', trigger: 'blur' },//不能为空
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'change' },
  ],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' }
  ]
}
// 保存
const handleSave = () => {
  formRef.value.validate(valid => {
    if (valid) {
      axios.post('/service/addOrUpdateService', formData.value)
          .then(res => {
            ElMessage.success(res.data)
            router.go(-1);
          })
    }
  })
};
//修改传值
const route = useRoute();
const getEdit = () => {
  axios.put(`/service/getServiceById/${route.query.serviceId}`).then(resp => {
    formData.value = resp.data;
    if (formData.value.times === '不限次数'){
      unlimited.value = true;
    }
  })
}
//勾选框
const unlimited = ref(false)
watch(()=>unlimited.value,value => {
  formData.value.times = value ? '不限次数' : ''
})
onMounted(()=>{
  if (route.query.serviceId !== undefined) {
    getEdit();
  }
  getType();
})
</script>

<template>
  <div class="service-item-form">
    <div class="header-container">
      <!-- 蓝色竖条 -->
      <div class="blue-pillar"></div>

      <!-- 主标题 -->
      <h1 class="service-title" v-if="route.query.serviceId === undefined">新增服务项目</h1>
      <h1 class="service-title" v-else>编辑服务项目</h1>
    </div>
    <el-form :model="formData" label-width="120px" ref="formRef" :rules="rules">
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入" style="width: 300px;" ></el-input>
      </el-form-item>
      <el-form-item label="服务次数" prop="times">
        <el-input
            v-model="formData.times"
            placeholder="请输入"
            :disabled="unlimited"
            min="0"
            style="width: 100px;" />
        <el-checkbox
            v-model="unlimited"
            style="left: 10px;"
            >
          不限次数
        </el-checkbox>
      </el-form-item>
      <el-form-item label="项目类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择" style="width: 150px;">
          <el-option
              v-for="item in projectTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目原价" prop="price">
        <el-input v-model.number="formData.price" placeholder="请输入" suffix="元" style="width: 150px;"></el-input>
      </el-form-item>
      <el-form-item label="服务介绍">
        <el-input
            type="textarea"
            v-model="formData.description"
            placeholder="请输入"
            style="width: 350px;"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="() => { router.go(-1); }">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.service-item-form {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
}
.el-form-item {
  margin-bottom: 16px;
}
.blue-pillar {
  border-radius: 15px !important;
  width: 8px;
  height: 28px;
  background: #2984F8;
  margin-right: 12px;
}
.service-title {
  font-size: 20px;
  color: #303133;
  font-weight: 600;
  letter-spacing: 1px;
}
.header-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  height: 20px;
}
</style>